<template>
  <div class="m-content-box">
    <div class="m-search cond-diagnose">
      <div class="m-search-left">
        <div class="search-label">
          <span class="label-w118">时间</span>
          <span class="label-w118">会籍顾问</span>
        </div>
        <div class="m-search-content">
          <div class="calendar-box space-mr10">
            <el-input id="date" type="text" class="calendar" name="date" placeholder="请选择时间" readonly="readonly" lay-key="1" />
          </div>
          <select id="consultants" class="space-mr10 select-common" />
          <el-button type="primary">搜索</el-button>
        </div>
      </div>
    </div>
    <div id="BAR" class="diagnose-bar" style="height: 376px;">
      <div class="pie-sider">
        <div class="pie-sider__label">月度到店次数</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />A类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/gte.png" alt=""> 8</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />4 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> B类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> 7</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />1 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> C类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> 3</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />D类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/eq.png" alt=""> 0</div>
      </div>
      <div id="BARBD" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none;" _echarts_instance_="ec_1727337690284"><div style="position: relative; width: 1056px; height: 387px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;" /></div>
    </div>
    <div id="PIE" class="diagnose-pie" style="height: 376px;">
      <div class="pie-sider">
        <div class="pie-sider__label"><span class="pie-sider__name js-name" />到店次数</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />A类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/gte.png" alt=""> 8</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />4 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> B类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> 7</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />1 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> C类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/lte.png" alt=""> 3</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />D类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/eq.png" alt=""> 0</div>
        <div class="pie-sider__item"><span class="pie-sider__legend" />E类 <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/eq.png" alt=""> 0</div>
      </div>
      <a id="eTypeLink" href="javascript:;" class="redirect-e-type">E类名单</a>
      <div id="PIEBD" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none;" _echarts_instance_="ec_1727337690285"><div style="position: relative; width: 1056px; height: 376px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;" /></div>
    </div>
  </div>
</template>

<script setup>

import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      updshow: false
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '会籍统计',
      url: '/diagnosis/diagnoseWeekly',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
  },
  methods: {
  }
}

</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
}
.cond-diagnose {
  margin-bottom: 10px;
  padding: 10px 20px 0;
  min-height: 65px;
  background: #ffffff;
  border-radius: 4px;
}
.m-search {
  position: relative;
  padding: 0 63px 20px;
  display: flex;
  justify-content: space-between;
}
.search-label {
  display: flex;
  height: 20px;
  overflow: hidden;
}
.search-label .label-w118 {
  width: 118px;
}

.search-label span {
  font-size: 12px;
  color: #787878;
}
.m-search-content {
  display: flex;
}
.m-search .calendar-box {
  position: relative;
  width: 116px;
  height: 34px;
  border-radius: 4px;
}

.calendar-box {
  position: relative;
  display: inline-block;
}
.space-mr10 {
  margin-right: 10px;
}
.m-search .select-common {
  width: 108px;
}

.space-mr10 {
  margin-right: 10px;
}
.select-common {
  width: 124px;
  height: 34px;
  border: 1px solid #d9d9d9;
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
}
.diagnose-bar {
  position: relative;
  margin-bottom: 20px;
  min-height: 387px;
  background: #ffffff;
  box-shadow: 0 1px 8px 2px rgba(235, 235, 235, .5);
  border-radius: 4px;
}
.diagnose-pie {
  position: relative;
  margin-bottom: 20px;
  height: 387px;
  background: #ffffff;
  box-shadow: 0 1px 8px 2px rgba(235, 235, 235, .5);
  border-radius: 4px;
}
.pie-sider {
  position: absolute;
  left: 4.5%;
  top: 80px;
  width: 160px;
  z-index: 100;
}
.pie-sider__label {
  font-size: 16px;
  margin-bottom: 15px;
}
.pie-sider__item {
  height: 20px;
  line-height: 20px;
  margin-bottom: 25px;
}
.pie-sider__item:nth-child(2) .pie-sider__legend {
  background: #41c3a8;
}
.pie-sider__item:nth-child(3) .pie-sider__legend {
  background: #ff5959;
}
.pie-sider__item:nth-child(4) .pie-sider__legend {
  background: #ffa061;
}
.pie-sider__item:nth-child(5) .pie-sider__legend {
  background: #0091ff;
}
.pie-sider__item:nth-child(6) .pie-sider__legend {
  background: #fee000;
}
.redirect-e-type {
  position: absolute;
  right: 3%;
  top: 30px;
  z-index: 100;
  padding-right: 26px;
  font-size: 18px;
  color: #41c3a8;
  background: url(../../../public/img/next.png?v=edf687b) no-repeat right center;
}

.pie-sider__legend {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 15px;
  vertical-align: text-bottom;
  border-radius: 4px;
}
</style>
